<template>
  <div class="goods">
    <div class="swiper">
      <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
        <block v-for="(item, index) in gallery " :key="index">
          <swiper-item class="swiper-item">
            <image :src="item.url" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
      <button class="share" hover-class="none" open-type="share" value="">分享商品</button>
    </div>
    <div class="swiper-b">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <div class="goods-info">
      <div class="c">
        <p>{{info.name}}</p>
        <p>{{info.desc}}</p>
        <p>￥{{info.price}}</p>
        <div v-if="brand.name" class="brand">
          <p>{{brand.name}}</p>
        </div>
      </div>
    </div>
    <div @click="showType" class="section-nav">
      <div>请选择规格数量</div>
      <div></div>
    </div>
    <!-- <div @click="showType" class="section-nav">
      <div>用户评价</div>
      <div></div>
    </div> -->

    <div v-if="attribute" class="attribute">
      <div class="head">
        商品参数
      </div>
      <div v-for="(item,index) in attribute" :key="index" class="item">
        <div>{{item.propName}}</div>
        <div>{{item.details[0]}}</div>
      </div>
    </div>
    <div v-if="goods_desc" class="detail">
      <wxParse :content="ngoods_desc" />
    </div>
    <!-- 常见问题 -->
    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <text class="title">常见问题</text>
        <div class="line"></div>
      </div>
      <div class="b">
        <div class="item" v-for="(item, index) in issueList" :key="index">
          <div class="question-box">
            <text class="spot"></text>
            <text class="question">{{item.question}}</text>
          </div>
          <div class="answer">
            {{item.answer}}
          </div>
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <!-- 大家都在看 -->

    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <text class="title">大家都在看</text>
        <div class="line"></div>
      </div>
      <div class="sublist">
        <div @click="togoodsDetail(subitem.id)" v-for="(subitem, subindex) in productList" :key="subindex">
          <img :src="subitem.list_pic_url" alt="">
          <p>{{subitem.name}}</p>
          <p>￥{{subitem.retail_price}}</p>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-fixed">
      <div @click="collect">
        <div class="collect" :class="[collectFlag ? 'active' :'']">

        </div>

      </div>
      <div @click="toCart">
        <div class="car">
          <span>
            {{allnumber}}
          </span>
          <img src="/static/images/ic_menu_shoping_nor.png" alt="">
          <!-- <div><i class='tn-icon-gouwuche'></i></div> -->
        </div>
      </div>      
      <div @click="addCart">加入购物车</div>
      <div @click="bug">立即购买</div>
    </div>

    <!-- 选择规格部分 -->
    <div v-show="showpop" @click="showType" class="pop">

    </div>
    <div class="attr-pop" :class="[showpop ? 'fadeup' : 'fadedown']">
      <div class="top">
        <div class="left" v-if="info.imageList">
          <img :src="info.imageList[0].url" alt="">
        </div>
        <div class="right">
          <div>
            <p>价格￥{{info.price}}</p>
            <p>请选择数量</p>
          </div>
        </div>
        <div @click="showType" class="close">
          X
        </div>
      </div>
      <div class="b">
        <p>数量</p>
        <div class="count">
          <div @click="reduce" class="cut">-</div>
          <input class="number" disabled="" v-model="number" />
          <div @click="add" class="add">+</div>
        </div>
      </div>
    </div>

    <!-- 选择规格部分 -->
  </div>
</template>

<script>
import { get, post, toLogin, login, getStorageOpenid } from "../../utils";
import wxParse from "mpvue-wxparse";

export default {
  onLoad(){
    
  },
  onShow() {
  },
  mounted() {
    // debugger;
    //判断是否登录获取用户信息
    if (login()) {
      this.userInfo = login();
    }
    //console.log(this.$root.$mp.query.id);
    console.log(this.id)
    
    
    var obj = wx.getLaunchOptionsSync()
    const isRead = wx.getStorageSync('isRead') || false;
    console.log(isRead)
    console.log(obj)
     console.log(this.$root.$mp.query)
    if(obj.query && obj.query.id&& !isRead)
    {
      wx.setStorageSync('isRead',true)
      this.id = obj.query.id
    }
    else
    {
      this.id = this.$root.$mp.query.id;
    }

    this.openId = getStorageOpenid();
    console.log(this.id)
    this.goodsDetail();
  },
  //商品转发
  onShareAppMessage() {
    console.log(this.info.name);
    console.log(this.info.id);
    console.log(this.gallery[0].img_url);

    return {
      title: this.info.name,
      path: "/pages/goods/main?id=" + this.info.id,
      imageUrl: this.gallery[0].img_url //拿第一张商品的图片
    };
  },
  data() {
    return {
      allnumber: 0,
      openId: "",
      collectFlag: false,
      number: 1,
      showpop: false,
      gallery: [],
      info: {},
      brand: {},
      attribute: [],
      issueList: [],
      productList: [],
      goods_desc: "",
      id: "",
      userInfo: "",
      goodsId: "",
      allPrise: "",
      ngoods_desc:''
    };
  },
  components: {
    wxParse
  },
  methods: {
    togoodsDetail(id) {
      wx.redirectTo({ url: "/pages/goods/main?id=" + id });
    },
    add() {
      this.number = this.number + 1;
    },
    reduce() {
      if (this.number > 1) {
        this.number = this.number - 1;
      } else {
        return false;
      }
    },
    async bug() {
      if (toLogin()) {
        if (this.showpop) {
          if (this.number == 0) {
            wx.showToast({
              title: "请选择商品数量", //提示的内容,
              duration: 2000, //延迟时间,
              icon: "none",
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
            return false;
          }
          console.log(this.goodsId);
          console.log(this.openId);

          // const data = await post("/order/submitAction", {
          //   goodsId: this.goodsId,
          //   openId: this.openId,
          //   allPrise: this.allPrise
          // });
          // if (data) {
          //   wx.navigateTo({
          //     url: "/pages/order/main"
          //   });
          // }
          console.log(this.allPrise);
          const adcart = await post("/cart", {
            openId: this.openId,
            goodsId: this.goodsId,
            amount: this.number
          });
          // debugger;
          //添加成功后
           if (adcart) { // 本地保存用户的购物车数据
              this.allnumber = this.allnumber + this.number;
              this.showpop = false;
              // wx.showToast({
              //   title: "添加购物车成功",
              //   icon: "success",
              //   duration: 1500
              // });  
              const data = await post("/order/submit", {
                goodsId: adcart.objectId,//cartId
                openId: this.openId,
                allPrice: parseFloat(this.allPrise)
              })
              .then(msg=>{
                 wx.navigateTo({
                    url: "/pages/order/main?orderId="+msg.objectId
                });
              })
              .catch(error=>console.log(error));
              // if (data) {
                 
              // }       
           }
           
          this.showpop = false;
        } else {
          this.showpop = true;
        }
      }
    },
    async collect() {
      if (toLogin()) {
        
        const data = await post("/collect/addcollect", {
          openId: this.openId,
          goodsId: this.goodsId
        });
        if(data){
          console.log(data);
          if(data.code ==0){
            this.collectFlag = !this.collectFlag;
             wx.showToast({
              title: data.msg, //提示的内容,
              duration: 2000, //延迟时间,
              // icon: "",
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }

          
        }

      }
    },
    async addCart() {
      if (toLogin()) {
        if (this.showpop) {
          if (this.number == 0) {
            wx.showToast({
              title: "请选择商品数量", //提示的内容,
              duration: 2000, //延迟时间,
              icon: "none",
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
            return false;
          }
          const data = await post("/cart", {
            openId: this.openId,
            goodsId: this.goodsId,
            amount: this.number
          });
          //添加成功后
           if (data) { // 本地保存用户的购物车数据
              this.allnumber = this.allnumber + this.number;
              this.showpop = false;
              wx.showToast({
                title: "添加购物车成功",
                icon: "success",
                duration: 1500
              });            
           }
        } else {
          this.showpop = true;
        }
      }
    },
    toCart() {
      wx.switchTab({
        url: "/pages/cart/main"
      });
      // wx.navigateTo({
      //   url: "/pages/cart/main"
      // });
    },
    async goodsDetail() {
      // debugger;
      let data = await get("/goods", {
         id: this.id,
      //   openId: this.openId
       });
       console.log(`获取商品的详情数据，ID:${this.id},Data:`,data)
       let cgoods =  {}
       if(data.code == 200){
         cgoods = data.data;
       }else{
         console.log('商品获取失败')
       }

       console.log(cgoods)
       this.gallery = cgoods.imageList;
        this.info = cgoods;
        this.allPrise = cgoods.price;
       this.goodsId = cgoods.objectId;
       this.brand = {
         name:"纤纸洁"
       };
       this.attribute = cgoods.properties; //属性
       this.goods_desc = cgoods.desc;
       this.issueList = [{
         id:1,
         goods_id:cgoods.objectId,
         question:'购买运费如何收取',
         answer:'单笔订单金额（不含运费）满88元免邮费；不满88元，每单按体积收费。\n'
       },{
         id:2,
         goods_id:cgoods.objectId,
         question:'使用什么快递发货？',
         answer:'默认使用中通快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区'
       }]; // 常见问题
       this.collectFlag = false;
      // this.allnumber = data.allnumber;
      // this.productList = data.productList;// 大家都在看的列表
      if(cgoods.name&& cgoods.name.indexOf('抽纸')!= -1){
        //是抽纸
        this.ngoods_desc = "<p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/1.jpg\" ></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/2.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/3.jpg\" style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/4.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/5.jpg\"  style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/6.jpg\"  style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/7.jpg\" style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/8.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/9.jpg\"  style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/10.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/cz/11.jpg\"  style=\"\"/></p><p><br/></p>";
      }else{
        this.ngoods_desc = "<p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/1.jpg\" ></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/2.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/3.jpg\" style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/4.jpg\" style=\"\"></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/5.jpg\"  style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/6.jpg\" style=\"\"/></p><p><img src=\"http://120.79.176.248/res_temp_2/qianzhijie/goodsdetail/jz/7.jpg\" style=\"\"></p><p><br/></p>";
      }
       
       
    },
    showType() {
      this.showpop = !this.showpop;
    }
  },
  computed: {}
};
</script>
<style lang='scss' scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
@import "./style.scss";
</style>
